[V0_FILE]typescriptreact:file="hooks/use-video-player.ts" isEdit="true" isMerged="true" "use client" import { useState, useRef, useCallback, useEffect } from "react" /** * Custom hook for video player functionality * * @param videoUrl URL of the video to play * @param isActive Whether the video is currently active in the viewport * @returns Video player state and control methods */ export default function useVideoPlayer(videoUrl: string, isActive: boolean) { const videoRef = useRef(null) const [isPlaying, setIsPlaying] = useState(false) const [isMuted, setIsMuted] = useState(true) const [progress, setProgress] = useState(0) const [error, setError] = useState(null) const [isLoaded, setIsLoaded] = useState(false) // Add a playPromise ref to track the current play promise const playPromiseRef = useRef | null>(null) /** * Safely pauses the video, respecting any pending play promises */ const safelyPauseVideo = useCallback(() => { if (!videoRef.current) return // If there's an active play promise, wait for it to resolve before pausing if (playPromiseRef.current) { playPromiseRef.current .then(() => { if (videoRef.current) { videoRef.current.pause() setIsPlaying(false) } }) .catch(() => { // Even if the play promise was rejected, we still want to ensure the video is paused if (videoRef.current) { videoRef.current.pause() setIsPlaying(false) } }) .finally(() => { // Clear the play promise reference playPromiseRef.current = null }) } else { // No active play promise, safe to pause immediately videoRef.current.pause() setIsPlaying(false) } }, []) /** * Plays the video */ const playVideo = useCallback(() => { if (!videoRef.current || error) return try { // If there's an existing play promise, wait for it to resolve before playing again if (playPromiseRef.current) { playPromiseRef.current .then(() => { if (videoRef.current) { videoRef.current.currentTime = 0 const promise = videoRef.current.play() if (promise !== undefined) { playPromiseRef.current = promise promise .then(() => setIsPlaying(true)) .catch((error) => { // Only log as an error if it's not an AbortError (which is expected when interrupted) if (error.name !== "AbortError") { console.error("Playback failed:", error) setIsPlaying(false) setError("Failed to play video") } }) } else { // For browsers that don't return a promise setIsPlaying(true) playPromiseRef.current = null } } }) .catch(() => { // Previous promise rejected, start a new one if (videoRef.current) { videoRef.current.currentTime = 0 const promise = videoRef.current.play() if (promise !== undefined) { playPromiseRef.current = promise promise .then(() => setIsPlaying(true)) .catch((error) => { if (error.name !== "AbortError") { console.error("Playback failed:", error) setIsPlaying(false) setError("Failed to play video") } }) } else { setIsPlaying(true) playPromiseRef.current = null } } }) } else { // No existing play promise, start a new one videoRef.current.currentTime = 0 const promise = videoRef.current.play() if (promise !== undefined) { playPromiseRef.current = promise promise .then(() => setIsPlaying(true)) .catch((error) => { if (error.name !== "AbortError") { console.error("Playback failed:", error) setIsPlaying(false) setError("Failed to play video") } }) } else { setIsPlaying(true) playPromiseRef.current = null } } } catch (err) { console.error("Error attempting to play video:", err) setIsPlaying(false) setError("Failed to play video") } }, [error]) /** * Pauses the video */ const pauseVideo = useCallback(() => { safelyPauseVideo() }, [safelyPauseVideo]) /** * Toggles video play/pause state */ const togglePlay = useCallback(() => { if (!videoRef.current || error) return if (isPlaying) { pauseVideo() } else { playVideo() } }, [isPlaying, error, pauseVideo, playVideo]) /** * Toggles video mute state */ const toggleMute = useCallback(() => { if (!videoRef.current || error) return videoRef.current.muted = !isMuted setIsMuted(!isMuted) }, [isMuted, error]) /** * Updates progress bar when video time updates */ const handleTimeUpdate = useCallback(() => { if (!videoRef.current) return const progress = (videoRef.current.currentTime / videoRef.current.duration) * 100 setProgress(progress) }, []) /** * Handles video loading errors with detailed error messages */ const handleError = useCallback((e: Event) => { const videoElement = e.target as HTMLVideoElement const mediaError = videoElement.error let errorMessage = "Failed to load video" if (mediaError) { switch (mediaError.code) { case MediaError.MEDIA_ERR_ABORTED: errorMessage = "Video playback was aborted" break case MediaError.MEDIA_ERR_NETWORK: errorMessage = "Network error occurred while loading the video" break case MediaError.MEDIA_ERR_DECODE: errorMessage = "Video decoding error" break case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED: errorMessage = "Video format is not supported" break } } // Check for the specific DOMException about interrupted play requests if (e instanceof DOMException && e.message.includes("The play() request was interrupted")) { console.warn("Play interrupted:", e.message) // Don't show an error to the user for this case, as we'll handle it gracefully return } console.error("Video failed to load:", errorMessage) setError(errorMessage) setIsPlaying(false) }, []) /** * Handles successful video loading */ const handleLoaded = useCallback(() => { setIsLoaded(true) setError(null) }, []) /** * Handles video playback when active state changes */ useEffect(() => { if (!videoRef.current || error) return if (isActive && isLoaded) { playVideo() } else { pauseVideo() } // Cleanup function to release resources when component unmounts return () => { if (videoRef.current && !isActive) { safelyPauseVideo() } } }, [isActive, isLoaded, error, playVideo, pauseVideo, safelyPauseVideo]) // Cleanup on unmount useEffect(() => { return () => { if (videoRef.current) { // Properly handle any pending play promise before cleaning up safelyPauseVideo() // Clear the source to release memory try { videoRef.current.src = "" videoRef.current.load() } catch (err) { console.warn("Error cleaning up video element:", err) } } } }, [safelyPauseVideo]) return { videoRef, isPlaying, isMuted, progress, error, isLoaded, togglePlay, toggleMute, handleTimeUpdate, handleError, handleLoaded, } } [V0_FILE]typescriptreact:file="types.tsx" isEdit="true" isQuickEdit="true" isMerged="true" export interface VideoPlayerProps { video: Video isActive: boolean } export interface Video { id: string url: string username: string description: string } [V0_FILE]typescriptreact:file="types/index.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" /** * Represents a video in the feed */ export interface Video { id: number url: string username: string description: string likes: string comments: string shares: string } /** * Props for the VideoPlayer component */ export interface VideoPlayerProps { video: Video isActive: boolean } /** * Props for the VideoActionButton component */ export interface VideoActionButtonProps { icon: React.ElementType count: string label: string onClick?: () => void } /** * Props for the VideoControls component */ export interface VideoControlsProps { isPlaying: boolean isMuted: boolean progress: number onPlayPause: () => void onMuteToggle: () => void } /** * Props for the VideoInfo component */ export interface VideoInfoProps { username: string description: string } [V0_FILE]typescriptreact:file="components/video-feed.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useRef, useCallback } from "react" import { ChevronDown } from "lucide-react" import VideoPlayer from "./video-player" import type { Video } from "@/types" // Sample video data with reliable sources const videos: Video[] = [ { id: 1, url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4", username: "@user1", description: "Check out this amazing video! #trending #viral", likes: "1.2M", comments: "10.5K", shares: "8.7K", }, { id: 2, url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4", username: "@user2", description: "This is so cool! #fyp #foryoupage", likes: "876K", comments: "5.2K", shares: "3.1K", }, { id: 3, url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", username: "@user3", description: "Can't believe I captured this moment! #moment #memories", likes: "2.3M", comments: "15K", shares: "12.4K", }, ] /** * VideoFeed component that displays a scrollable feed of videos * in a TikTok-style interface. */ export default function VideoFeed() { const [activeVideoIndex, setActiveVideoIndex] = useState(0) const [isScrolling, setIsScrolling] = useState(false) const feedRef = useRef(null) const scrollTimeout = useRef(null) // Handle scroll to detect active video const handleScroll = useCallback(() => { if (!feedRef.current) return setIsScrolling(true) if (scrollTimeout.current) { clearTimeout(scrollTimeout.current) } scrollTimeout.current = setTimeout(() => { setIsScrolling(false) // Snap to the nearest video when scrolling stops if (feedRef.current) { const scrollTop = feedRef.current.scrollTop const videoHeight = window.innerHeight const index = Math.round(scrollTop / videoHeight) if (index >= 0 && index < videos.length) { feedRef.current.scrollTo({ top: index * videoHeight, behavior: "smooth", }) setActiveVideoIndex(index) } } }, 100) // Update active video index during scrolling const scrollTop = feedRef.current.scrollTop const videoHeight = window.innerHeight const index = Math.round(scrollTop / videoHeight) if (index !== activeVideoIndex && index >= 0 && index < videos.length) { setActiveVideoIndex(index) } }, [activeVideoIndex]) // Scroll to specific video const scrollToVideo = useCallback((index: number) => { if (feedRef.current && index >= 0 && index < videos.length) { feedRef.current.scrollTo({ top: index * window.innerHeight, behavior: "smooth", }) setActiveVideoIndex(index) } }, []) return ( <> {/* Fixed header */}

{/* Spacer for centering */}

For You

{/* Video navigation indicators */} {/* Video feed with enhanced snap scrolling */}

{videos.map((video, index) => (

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import VideoFeed from "@/components/video-feed" /** * Main page component that renders the TikTok clone application * * @returns Rendered component */ export default function Home() { return (

{/* Mobile app container - fixed width on desktop, full width on mobile */}

) } [V0_FILE]typescriptreact:file="components/video-player.tsx" isEdit="true" isQuickEdit="true" "use client" import { Heart, MessageCircle, Share2, AlertCircle, Play, Pause, VolumeX, Volume2 } from "lucide-react" import type { VideoPlayerProps } from "@/types" import useVideoPlayer from "@/hooks/use-video-player" /** * VideoPlayer component that handles the display and playback of a video * in a TikTok-style interface. */ const VideoPlayer = ({ video, isActive }: VideoPlayerProps) => { const { videoRef, isPlaying, isMuted, progress, error, togglePlay, toggleMute, handleTimeUpdate, handleError, handleLoaded, } = useVideoPlayer(video.url, isActive) return (

{!error ? ( <>

{/* Play/Pause overlay */} {!isPlaying && (

)} {/* Video Controls */}

{/* Video Info */}

{video.username}

{video.description}

{/* Action Buttons */}

) : ( // Error state

{error}

Try refreshing the page

)}

) } export default VideoPlayer

About

Tags

Share

More from chinpeerapat

More Templates Like This

About

Tags

Share

About

Tags

Share

More from chinpeerapat

More Templates Like This